<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据展示</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片式图区域 -->
    <el-card>
      <!-- 为charts准备一个具备大小宽高的dom -->
      <div id="main"
           style="width:600px;height:400px"></div>
    </el-card>
  </div>
</template>
<script>
// 导入echarts
import * as echarts from 'echarts'
import _ from 'lodash'
export default {
  data () {
    return {
      options: {

      }
    }
  },
  created () {
  },
  // 此时页面上的元素已经被渲染完毕
  async mounted () {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    // const { data: res } = await this.$http.get('report/type/1')
    // if (res.meta.status !== 200) {
    //   return this.$message.error('获取折线图数据失败')
    // }
    // 准备数据和配置项
    var option = {
      title: {
        text: '数据报表'
      },

      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C']
      },
      yAxis: {
        data: [0, 10000, 20000, 30000, 40000, 50000, 60000]
      },
      series: [
        {
          data: [1000, 20000, 30000, 40000, 50000],
          type: 'line',
          stack: 'x',
          areaStyle: {}
        },
        {
          data: [20000, 3000, 2000, 4000, 5000],
          type: 'line',
          stack: 'x',
          areaStyle: {}
        },
        {
          data: [2, 5, 4, 3, 5, 10],
          type: 'line',
          stack: 'x',
          areaStyle: {}
        }
      ]
    }
    // 使用lodash合并数据
    // const result = _.merge(res.data, this.options)
    // 展示数据
    myChart.setOption(option)
    // myChart.setOption(result)
  },
  methods: {

  }
}
</script>
<style scoped>
</style>
